<template>
	<div class="list-data-box">
		<table class="my-table">
			<thead>
				<tr class="table_th">
					<th>项目名称</th>
					<th>监管银行名称</th>
					<th>监管账户余额</th>
					<th>监管协议额度</th>
				</tr>
			</thead>
		</table>
		<el-scrollbar class="scroll-height" @scroll="handleScroll">
			<div class="list-box " ref="scrollContent" v-if="tableData.length > 0">
				<div class="list-index" v-for="(item, index) in tableData">
					<div class="list-title-index">
						<div class=""> <span>{{ item.xmmc }}</span></div>
						<div class=""> <span>{{ item.jgyhmc }}</span> </div>
						<div class=""> <span>{{ item.jgzhye }}</span> </div>
						<div class=""> <span>{{ item.jgxyed }}</span> </div>
						<el-icon color="#ffffff" @click="getExpanded(index)" v-if="!item.expanded">
							<ArrowLeft />
						</el-icon>
						<el-icon color="#ffffff" @click="getExpanded(index)" v-if="item.expanded">
							<ArrowDown />
						</el-icon>
					</div>
					<div class="list-content-index" v-if="item.expanded">
						<div class=""> 项目名称：{{ item.xmmc }}</div>
						<div class=""> 项目编号：{{ item.xmbh }} </div>
						<div class=""> 监管银行代码：{{ item.jgyhdm }} </div>
						<div class=""> 监管银行名称：{{ item.jgyhmc }}</div>
						<div class=""> 监管账户：{{ item.jgzh }} </div>
						<div class=""> 监管协议编号：{{ item.jgxybh }} </div>
						<div class=""> 监管协议额度：{{ item.jgxyed }} </div>
						<div class=""> 监管协议余额：{{ item.jgzhye }} </div>
					</div>
				</div>
			</div>
			<div v-else class="empty">暂无数据</div>
		</el-scrollbar>
	</div>
</template>

<script setup lang="ts">
import { ref, watchEffect, onMounted, onUnmounted, defineEmits } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
// 接收参数
const mapInd = ref(0);
const tableData = ref<any>([]);
const emit = defineEmits(['setCurrent']);

const props = defineProps({
	scrollData: {
		type: Object,
		default: () => { },
	},
	listDataType: {
		type: Number,
		required: true,
	},
});
// 监听索引变化
watchEffect(() => {
	if (Object.keys(props.scrollData).length > 0) {
		if (props.listDataType == 1) {
			tableData.value = props.scrollData.records
			tableData.value.map((item: { expanded: boolean; }) => {
				item.expanded = false
			})
		} else {
			props.scrollData.records.map((item: any) => {
				item.expanded = false;
				tableData.value.push(item)
			})
		}
	}
});

const throttle = ref(false)

const handleScroll = (e: any) => {
	const scrollContent = document.querySelector('.el-scrollbar__wrap');
	if (scrollContent.scrollTop + scrollContent.clientHeight >= scrollContent.scrollHeight - 30 && !throttle.value) {
		loadMoreData();
	}
}


const loadMoreData = () => {
	if (throttle.value) return
	emit('setCurrent', props.scrollData.current);
	throttle.value = true;
	setTimeout(() => {
		throttle.value = false;
	}, 1000)
};

const getExpanded = (index) => {
	tableData.value[index].expanded = !tableData.value[index].expanded;
}

onMounted(() => {
});
onUnmounted(() => {
});
</script>

<style lang="less" scoped>
.list-data-box{
	height:100%;
}
.my-table {
	position: relative;
	width: 100%;

	thead {
		width: 100%;
	}

	.tbody {
		height: 100%;
	}
}

.table_th {
	width: 596px;
	height: 41px;
	background: linear-gradient(180deg, #2586ee 0%, rgba(37, 134, 238, 0.6) 100%);
	position: absolute;
	z-index: 1;
	display: flex;
	color: #fff;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	position: relative;
	right: 2px;
	padding-left: 17px;
	padding-right: 50px;
}

.table_th th:nth-child(1),
.table_th th:nth-child(2),
.table_th th:nth-child(3),
.table_th th:nth-child(4) {
	width: 100px;
}

.seamless-warp {
	height: 100%;
	overflow: hidden;
}

.list-box {
	height: 100%;
}

.list-index {
	width: 100%;
	font-size: 12px;
	color: #FFFFFF;
	padding-left: 17px;
	padding-right: 50px;
	position: relative;

	.list-title-index {
		width: 100%;
		height: 41px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.el-icon {
			position: absolute;
			right: 15px;
		}
		.el-icon:hover{
			cursor: pointer;
		}

		>div {
			width: 100px;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			span {
				width: 100px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-align: center;
			}
		}
	}

	.list-content-index {
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-between;
		font-size: 12px;
		color: #fff;
		padding-bottom: 15px;

		div {
			width: 31%;
			margin-top: 15px;
			word-break: break-all;
		}

		div:nth-child(2),
		div:nth-child(3),
		div:nth-child(5),
		div:nth-child(6),
		div:nth-child(8),
		div:nth-child(9) {
			margin-left: 15px;
		}
	}
}

.list-index:nth-child(odd) {
	width: 100%;
	background: rgba(27, 126, 242, 0.2);
}

.scroll-height {
	height: 100%;
	height: calc(100% - 41px);
}

.con {
	width: 50px;
	height: 50px;
}
.empty{
	font-size: 14px;
	margin-top: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
